<template>
<el-menu 
default-active="1-4-1" 
class="el-menu-vertical-demo" 
@select="handleSelect"
:collapse="isCollapse"
background-color="#333333"
text-color="#cfd2d9"
active-text-color="#1e90ff">
    <div id="el-menu-title">{{ isCollapse ? '后台' : '通用后台管理系统' }}</div>
    <template v-for="(item, index) in menuData">
        <el-menu-item v-if="!item.children" :index="item.path" :key="index">
            <i :class="item.Icon"></i>
            <span slot="title">{{ item.label }}</span>
        </el-menu-item>
        <el-submenu v-if="item.children" :index="item.path" :key="index">
            <template slot="title">
                <i :class="item.Icon"></i>
                <span slot="title">{{ item.label }}</span>
            </template>
            <el-menu-item-group>
                <template slot="title">子菜单</template>
                <el-menu-item v-for="(item2, index2) in item.children" :key="index2" :index="item2.path">
                    <i :class="item2.Icon"></i>
                    <span slot="title">{{ item2.label }}</span>
                </el-menu-item>
            </el-menu-item-group>
        </el-submenu>
    </template>
</el-menu>
</template>

<script>
import router from '@/router/index';
export default {
    name:'NavMenu',
    data(){
        return {
            
        }
    },
    mounted(){
        
    },
    methods: {
        handleSelect(key) { // 点击侧边栏的项，进行路由跳转的函数
            this.$router.push({
                path: key
            })
        }
    },
    computed:{
        menuData(){ // 侧边栏数据(根据路由配置动态生成)
            const routerdata = router.options.routes // 路由配置数据
            const Grade = this.$store.state.user.userifo.Grade // 获取 vuex 的用户权限

            function fore(dataArray, pathstr){ // 循环递归提取路由配置数据的函数
                const data = []

                for (let i = 0; i < dataArray.length; i++) {
                    const GradeConfig = dataArray[i].meta.Grade // 获取路由的权限配置
                    if(GradeConfig !== '*' && typeof GradeConfig.length === 'number' && GradeConfig.indexOf(Grade) === -1) continue // 权限校验

                    const datae = {}
                    datae.label = dataArray[i].meta.label
                    datae.Icon = dataArray[i].meta.Icon

                    datae.path = '/' + pathstr + '/' +dataArray[i].path // 拼接路径
                    datae.path = datae.path.replace(/(\/)(\1)+/g, '/') // 将 '/' 连续出现两次以上的地方替换成单个 '/'

                    if(dataArray[i].children){ // 如果有子路由则循环提取子路由数据
                        datae.children = fore(dataArray[i].children, datae.path)
                    }

                    data.push(datae)
                }

                return data
            }

            return fore(routerdata[1].children, '')
        },
        isCollapse(){ // 将 vuex 的 isCollapse 映射过来
            return this.$store.state.header.isCollapse
        }
    },
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
    border: none;
}
#el-menu-title{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #1e90ff;
}
</style>

<style>

</style>